'use client';

import { useState } from 'react';

export default function Battle() {
  const [isMatching, setIsMatching] = useState(false);
  const [gameState, setGameState] = useState(null);

  const startMatching = () => {
    setIsMatching(true);
    // setGameState(true);
    // TODO: 实现匹配逻辑
  };

  if (isMatching && !gameState) {
    return (
      <div className="min-h-screen bg-gray-100 flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">正在匹配对手...</h2>
          <div className="animate-spin rounded-full h-16 w-16 border-b-2 border-gray-900 mx-auto"></div>
        </div>
      </div>
    );
  }

  if (gameState) {
    return (
      <div className="min-h-screen bg-gray-800 p-4">
        <div className="grid grid-cols-1 gap-8">
          {/* 对手信息 */}
          <div className="bg-gray-700 p-4 rounded-lg">
            <h3 className="text-white text-xl">对手信息</h3>
            {/* TODO: 显示对手卡牌和状态 */}
          </div>

          {/* 对战区域 */}
          <div className="bg-gray-600 p-4 rounded-lg">
            <h3 className="text-white text-xl mb-4">对战区域</h3>
            <div className="grid grid-cols-2 gap-4">
              {/* TODO: 实现卡牌对战区域 */}
            </div>
          </div>

          {/* 玩家卡牌区 */}
          <div className="bg-gray-700 p-4 rounded-lg">
            <h3 className="text-white text-xl mb-4">我的卡牌</h3>
            <div className="grid grid-cols-4 gap-4">
              {/* TODO: 显示玩家可用卡牌 */}
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="text-center">
        <h1 className="text-4xl font-bold text-gray-900 mb-8">卡牌对战</h1>
        <button
          onClick={startMatching}
          className="bg-blue-600 text-white px-8 py-3 rounded-lg text-xl font-semibold hover:bg-blue-700 transition-colors"
        >
          开始匹配
        </button>
      </div>
    </div>
  );
}